<div class="modal fade" id="approvalFlowModal" tabindex="-1" aria-labelledby="approvalFlowModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="approvalFlowModalLabel">审批流程 - {{ project.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
<div class="modal-body">
    <div class="approval-flow-chart">
        {% if project.first_approver %}
        <div class="approval-step {% if project.current_approval_step > 0 %}active{% endif %}">
            <div class="step-number">第一审批人</div>
            <div class="approver">
                <div class="approver-avatar">
                    <i class="bi bi-person-circle"></i>
                </div>
                <div class="approver-name">{{ project.first_approver.name }}</div>
            </div>
            <div class="step-arrow">
                <i class="bi bi-arrow-down"></i>
            </div>
        </div>
        {% endif %}

        {% for step in project.approval_flow.steps|sort(attribute='order') %}
        <div class="approval-step {% if step.order <= project.current_approval_step %}active{% endif %}">
            <div class="step-number">步骤 {{ step.order }}</div>
            <div class="approver">
                <div class="approver-avatar">
                    <i class="bi bi-person-circle"></i>
                </div>
                <div class="approver-name">{{ step.user.name }}</div>
                {% if step.require_comment %}
                <div class="step-requirement text-warning">
                    <small><i class="bi bi-chat-text"></i> 需填写审批意见</small>
                </div>
                {% endif %}
            </div>
            {% if not loop.last %}
            <div class="step-arrow">
                <i class="bi bi-arrow-down"></i>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

                <div class="current-status mt-4">
                    <h6>当前状态</h6>
                    {% if project.current_approval_step > 0 %}
                        <p>当前在 <strong>步骤 {{ project.current_approval_step }}</strong> 等待 <strong>{{ project.get_current_approval_step().user.name }}</strong> 审批</p>
                    {% else %}
                        <p>审批流程尚未开始</p>
                    {% endif %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>